﻿@{
    Layout = null;
}
@using JSMS.Model
@using Easy4net.Common
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" type="image/png" href="~/Content/AmazeUI-2.2.1/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="~/Content/AmazeUI-2.2.1/assets/i/app-icon72x72@2x.png">
    <link rel="stylesheet" href="~/Content/AmazeUI-2.2.1/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="~/Content/AmazeUI-2.2.1/assets/css/admin.css">
    <!--从bootstrap中扣取出来的用于分页使用-->
    <link href="~/Content/pagination.css" rel="stylesheet" />
    <title>学生作业提交系统首页</title>
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>

    <!--分页要用的-->
    <script src="~/Scripts/bootstrap-paginator.js"></script>
    @{
        PageResult<JobView> result = ViewData["pageResult"] as PageResult<JobView>;
        //总的记录条数
        int total = result.Total;
        var pages = Math.Ceiling((double)total / (double)10);
        List<JobView> jobs = result.DataList;
    }
    <script type="text/javascript">
        $(function () {
            var limit = 10;
            var totalPages = Math.ceil(Number('@total') / limit);
            var options = {
                currentPage: 1,
                totalPages: totalPages,
                size: "normal",
                alignment: "right",
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "第一页";
                        case "prev":
                            return "前一页";
                        case "next":
                            return "后一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },
                onPageClicked: function (e, originalEvent, type, page) {
                    $.ajax({
                        type: "post",
                        url: "Page?currentPage=" + page,
                        dataType: "json",
                        success: function (data) {
                            $("#pageContent").html('');
                            var html = "";
                            $.each(data, function (n, v) {
                                html += "<tr><td><input type='checkbox' /></td><td>" + v.Id + "</td>" +
                                    "<td><a href='#'>" + v.Title + "</a></td>" +
                                    "<td>" + sub(v.Description) + "</td>" +
                                    "<td class='am-hide-sm-only'>" + v.Name +
                                    "</td><td class='am-hide-sm-only'>" + jsonDateFormat(v.CreateTime) + "</td>" +
                                    "<td><div class='am-btn-toolbar'><div class='am-btn-group am-btn-group-xs'>" +
                                    "<button class='am-btn am-btn-default am-btn-xs am-text-secondary'><span class='am-icon-pencil-square-o'></span> 编辑</button>" +
                                    "<button class='am-btn am-btn-default am-btn-xs am-hide-sm-only'><span class='am-icon-copy'></span> 复制</button>" +
                                    "<button class='am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only'><span class='am-icon-trash-o'></span> 删除</button>" +
                                    "</div></div></td>";
                            })
                            $("#pageContent").html(html);
                        }
                    });
                }
            }
            $('#page').bootstrapPaginator(options);
        });
        /*
        json日期格式转换为正常格式
        */
    function jsonDateFormat(jsonDate) {
        try {//出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢!
            var date = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            var milliseconds = date.getMilliseconds();
            return date.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds + "." + milliseconds;
        } catch (ex) {//出自http://www.cnblogs.com/ahjesus 尊重作者辛苦劳动成果,转载请注明出处,谢谢!            
            return "";
        }
    }
        /*
        前台输出的时候截取字符串
        */
    function sub(str) {
        if (str.lenth <= 15) {
            return str;
        } else {
            return str.substring(0, 15) + "...";
        }
    }
    </script>
</head>
<body>
    @RenderPage("~/Views/Shared/Header.cshtml")
    <div class="am-cf admin-main">
        @RenderPage("~/Views/Shared/LeftMenu.cshtml")
        <!-- 主体开始 -->
        <!-- content start -->
        <div class="admin-content">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">作业列表</strong> / <small>JobList</small></div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-12 am-u-md-6">
                    <div class="am-btn-toolbar">
                        <div class="am-btn-group am-btn-group-xs">
                            <button type="button" class="am-btn am-btn-default"><span class="am-icon-plus"></span> 新增</button>
                            <button type="button" class="am-btn am-btn-default"><span class="am-icon-save"></span> 保存</button>
                            <button type="button" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 审核</button>
                            <button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 删除</button>
                        </div>
                    </div>
                </div>
                <div class="am-u-sm-12 am-u-md-3">
                    <div class="am-form-group">
                        <select data-am-selected="{btnSize: 'sm'}">
                            <option value="option1">所有类别</option>
                            <option value="option2">IT业界</option>
                            <option value="option3">数码产品</option>
                            <option value="option3">笔记本电脑</option>
                            <option value="option3">平板电脑</option>
                            <option value="option3">只能手机</option>
                            <option value="option3">超极本</option>
                        </select>
                    </div>
                </div>
                <div class="am-u-sm-12 am-u-md-3">
                    <div class="am-input-group am-input-group-sm">
                        <input type="text" class="am-form-field">
                        <span class="am-input-group-btn">
                            <button class="am-btn am-btn-default" type="button">搜索</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <form class="am-form">
                        <table class="am-table am-table-striped am-table-hover table-main">
                            <thead>
                                <tr>
                                    <th class="table-check"><input type="checkbox" /></th>
                                    <th class="table-id">ID</th>
                                    <th class="table-title">标题</th>
                                    <th class="table-type">描述</th>
                                    <th class="table-author am-hide-sm-only">作者</th>
                                    <th class="table-date am-hide-sm-only">发布日期</th>
                                    <th class="table-set">操作</th>
                                </tr>
                            </thead>
                            <tbody id="pageContent">
                                @{
                                    for (int i = 0; i < jobs.Count;i++ )
                                    {
                                        <tr>
                                            <td><input type="checkbox" /></td>
                                            <td>@jobs.ElementAt(i).Id</td>
                                            <td><a href="#">@jobs.ElementAt(i).Title</a></td>
                                            <td>
                                                @{
                                                    string str=jobs.ElementAt(i).Description;
                                                    if(str.Length>=10){
                                                        @(str.Substring(0, 10) + "...")
                                                    }
                                                    else { 
                                                        @str
                                                    }
                                                }
                                            </td>
                                            <td class="am-hide-sm-only">@jobs.ElementAt(i).Name</td>
                                            <td class="am-hide-sm-only">@jobs.ElementAt(i).CreateTime</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    }
                                }
                            </tbody>
                        </table>
                        <div class="am-cf">
                            每页 10 条记录共 @pages 页记录
                            <div class="am-fr" id="page">
                                
                            </div>
                        </div>
                        <hr />
                        <p>注：.....</p>
                    </form>
                </div>
            </div>
        </div>
        <!-- content end -->
</div>
<a class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
@RenderPage("~/Views/Shared/Footer.cshtml")
<!--<div id="container_id" style="width:150px;height:260px"></div> -->
</body>
</html>
